<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0">
	<title>学子登录页面</title>
	<link rel="icon" href="./img/favicon.ico">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/login.css">
</head>
<body>
	<!-- f1 头部 -->
	<div class="f1">
		<div class="container">
			<!-- logo -->
			<a href="./index.html" class="logo">
				<span></span>
			</a>
			<!-- 标题 -->
			<div class="title">欢迎登录</div>
		</div>
	</div>
	<!-- f2 内容 -->
	<div class="f2">
		<div class="container">
			<div class="card">
				<!-- 标题 -->
				<div class="row1">
					<div class="col">登录学子商城</div>
					<div class="col">
						<a href="./register.html">新用户注册</a>
					</div>
				</div>
				<div class="hr"></div>
				<!-- 内容 -->
				<div class="row2">
					<div class="row1">
						<input type="text" class="uname" placeholder="请输入您的用户名">
						<img src="./img/yhm.png">
					</div>
					<div class="row1">
						<div class="msg">&nbsp;</div>
					</div>
					<div class="row1">
						<input type="password" class="upwd" placeholder="请输入您的密码">
						<img src="./img/mm.png">
					</div>
					<div class="row1">
						<div class="col1">
							<input type="checkbox"><div>自动登录</div>
						</div>
						<div class="col2"><a href="#">忘记密码？</a></div>
					</div>
					<div class="loginbtn">登录</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f3 功能菜单 -->
	<div class="f3">
		<div class="container">
			<ul class="menu">
				<li>
					<div>
						<span class="icon1"></span>
					</div>
					<div>品质保障</div>
				</li>
				<li>
					<div>
						<span class="icon2"></span>
					</div>
					<div>私人订制</div>
				</li>
				<li>
					<div>
						<span class="icon3"></span>
					</div>
					<div>学员特供</div>
				</li>
				<li>
					<div>
						<span class="icon4"></span>
					</div>
					<div>专属特权</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- f4 底部文字说明 -->
	<div class="f4">
		<div class="container">
			<!-- 底部logo和说明文字 -->
			<div class="Footlogo">
				<span></span>
				<span></span>
			</div>
			<!-- 底部功能列表 -->
			<div class="Footlist">
				<div class="FootList">
					<ul>
						<li>买家帮助</li>
						<li>商家帮助</li>
						<li>关于我们</li>
					</ul>
				</div>
				<div class="FootMain">
					<ul>
						<li><a href="#">新手指南</a></li>
						<li><a href="#">服务保障</a></li>
						<li><a href="#">常见问题</a></li>
					</ul>
					<ul>
						<li><a href="#">商家入驻</a></li>
						<li><a href="#">商家后台</a></li>
					</ul>
					<ul>
						<li><a href="#">关于达内</a></li>
						<li><a href="#">联系我们</a></li>
						<li class="lianxi">
							<a href="#" class="wechat"></a>
							<a href="#" class="sinablog"></a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 客户端 -->
			<div class="khd">
				<div>
					<div>学子商城客户端</div>
					<div class="android"></div>
					<div class="ios"></div>
				</div>
				<div class="erweima"></div>
			</div>
		</div>
	</div>
	<!-- f5 版权说明 -->
	<div class="f5">
		<div class="container">©2017 达内科技有限公司 版权所有 京ICP备08000853号-75</div>
	</div>
	<!-- 模态框 -->
	<div class="model">
		<div class="kuang">
			<!-- 图标 -->
			<div class="icon"></div>
			<!-- 内容 -->
			<div>
				<div class="succ">登录成功！</div>
				<div class="loginmsg">&nbsp;</div>
				<div class="queding">
					<div class="quest">确定</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	let uname=document.querySelector('.uname');
	let upwd=document.querySelector('.upwd');
	let msg=document.querySelector('.msg');
	let login=document.querySelector('.loginbtn');
	uname.onblur=()=>{
		// 验证用户名是否为空
		if(!uname.value){
			msg.innerHTML='用户名不能为空';
			return;
		}
		let xhr=new XMLHttpRequest();
		xhr.open('GET',`http://127.0.0.1:8080/v2/users/check_uname?uname=${uname.value}`);
		xhr.onload=()=>{
			let data=JSON.parse(xhr.responseText);
			if(data.msg=='non-exists'){
				msg.innerHTML='该用户名未注册';
			}else{
				msg.innerHTML='用户名验证通过';
			}
		}
		xhr.send();
	}
	let succ=document.querySelector('.succ');
	let loginmsg=document.querySelector('.loginmsg');
	let model=document.querySelector('.model');
	let quest=document.querySelector('.quest');
	login.onclick=()=>{
		let xhr=new XMLHttpRequest();
		xhr.open('POST','/v2/users/login');
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');
		xhr.onload=()=>{
			let data=JSON.parse(xhr.responseText);
			if(data.code==200){
				model.style.display="block";
				succ.innerHTML='登录成功！';
				loginmsg.innerHTML='单击确定后，跳转到用户中心'
				quest.onclick=()=>{
					location.href='./user_basis.html';
				}
			}else{
				model.style.display='block';
				succ.innerHTML='登录失败!';
				loginmsg.innerHTML='原因：用户名或密码无效！'
				quest.onclick=()=>{
					model.style.display='none';
				}
			}
		}
		xhr.send(`uname=${uname.value}&upwd=${upwd.value}`);
	}
	uname.onfocus=()=>{
		msg.innerHTML='正在查询...';
	}
</script>
</html>